import React, { Component } from "react";
import { SafeAreaView, Text, View, StyleSheet, TouchableOpacity, Image, TextInput, PermissionsAndroid, Platform, DeviceEventEmitter, Switch, FlatList, ActivityIndicator } from 'react-native';
import Constant from '../../../utils/Constant'//全局变量
import { getImgUrl, getCarRegisterDate, getMileFormat, getPriceFormat, getStoreStatus, getSaleStatus, getCheckStatus, getPurchaseType, getPerm } from '../../../utils/ComFunction';
import HttpUtils from "../../../utils/HttpUtils";
import HttpUrls from "../../../utils/HttpUrls";
import Header from "../../../components/header";
import { ToastToUser } from "../../../utils/CustomToast";
import ActionSheet from 'react-native-actionsheet'
import ImageCropPicker from 'react-native-image-crop-picker';
import Upload from '../../../components/upload/Upload'
import { requestCameraPermission, requestWritePermission } from '../../../utils/Permission';
import Loading from "../../../utils/Loading";
import AndroidModule from "../../../utils/AndroidConnent";
import CommonDialog from "../../../components/dialog/CommonDialog";
import DeviceInfo from 'react-native-device-info';
import StatusBarSelf from "../../../components/StatusBarSelf";
import StockTopDropdown from "./StockTopDropdown";
import StockStatusDropdown from "./StockStatusDropdown";
import CheckStatusDropdown from "./CheckStatusDropdown";
import SortDropdown from "./SortDropdown";
import PriceRangeModal from "./PriceRangeModal";
import DateRangeModal from "./DateRangeModal";
import AsyncImage from '../../../components/image/AsyncImage'
import BottomShareDialog, { SharePlatForm } from "../../common/BottomShareDialog";
import { CarSaleStatus, PermissionType } from '../../../utils/Enum'
import moment from 'moment';
import CarListShareBox from './CarListShareBox'
import { shareWebToSession, shareWebToTimeline } from '../../../utils/WeChatUtils'
import base64 from 'react-native-base64';


let navigation = null

const isIos = Platform.OS == 'ios';

let entranceType = ''

/**
 * 车辆管理
 */
export default class CarStockListPage extends Component {

    constructor(props) {
        super(props);
        let addCarPerm = getPerm(PermissionType.Permission_EnableAddCar)
        let keyword = this.props.route.params && this.props.route.params.keyword ? this.props.route.params.keyword : ''
        this.state = {
            addCarPerm,
            isFranchisee: Constant.userInfo.isFranchisee,
            isShowTopDropdown: false,
            topTitle: '全部库存',
            carList: [],
            carTotal: 0,
            isShowStockStatusDrop: false,
            stockStatusShowText: '库存状态',
            isShowCheckStatusDrop: false,
            checkStatusShowText: '检测状态',
            detectionStatus: 0,
            isShowSortDrop: false,
            sortShowText: '排序',
            orderColumns: [],

            pageNo: 1,
            searchChannel: 'app_stock_merchant_car',
            saleStatus: '1,2,3,5',
            storeStatus: 0,
            isRefresh: false,
            showFoot: 0,
            joinQuotationCenter: -1,
            joinUnion: -1,

            keyword: keyword,
            filterShowList: [],
            isReported: 0,
            mileageMin: 0,
            mileageMax: 10,
            registerDateBegin: 0,
            registerDateEnd: 8,
            carColor: '',
            carRank: '',
            gearboxType: 0,
            gearboxTypeTitle: '',
            emissionStd: 0,
            emissionStdTitle: '',
            energyType: 0,
            energyTypeTitle: '',

            brand: 0,
            series: 0,

            isPriceModalVisible: false,
            markedPriceMin: 0,
            markedPriceMax: 0,

            isDateModalVisible: false,
            tradeDateBegin: '',
            tradeDateEnd: '',
            tradeDateText: '',

            sellerUserId: '',//销售员

            isShowShareCar: true,
            isShowSharePop: false,
            isShowShareBottom: false,
            shareParams: {},

            // 新加的多选条件
            carColorList: [],
            carColorListPr: [],
            carRankList: [],
            carRankListPr: [],
            gearboxTypeList: [],
            gearboxTypeListPr: [],
            emissionStdList: [],
            emissionStdListPr: [],
            energyTypeList: [],
            energyTypeListPr: [],
        };
    }

    componentDidMount() {

        this.commonEvent = DeviceEventEmitter.addListener('commonEvent', (data) => {
            console.log('commonEvent', data);
            if (data.type == 'search' && data.fromPage == 'CarStockListPage') {
                let keywordObj = {
                    title: data.keyword,
                    key: 'keyword',
                    value: data.keyword
                }
                this.addFilter(keywordObj)
                this.setState({
                    keyword: data.keyword,

                }, function () {
                    this.refreshData()
                })

            } else if (data.type == 'moreFilter' && data.fromPage == 'CarStockListPage') {

                this.addAllFilterShow(data)


                this.refreshData()
            } else if (data.type == 'selectUserResult' && data.from == 'sell') {
                let userObj = {
                    title: data.fullname,
                    key: 'sellerUserId',
                    value: data.userId
                }

                this.addFilter(userObj)

                this.setState({
                    sellerUserId: data.userId
                }, function () {
                    this.refreshData()
                })
            }
        })

        this.selectBrandResult = DeviceEventEmitter.addListener('selectBrandResult', (result) => {

            if (result && result.from == 'CarStockListPage') {
                this.formatBrand(result)
            }
        })

        if (this.state.keyword) {
            let keywordObj = {
                title: this.state.keyword,
                key: 'keyword',
                value: this.state.keyword
            }
            this.addFilter(keywordObj)
        }

        entranceType = this.props.route.params && this.props.route.params.entranceType ? this.props.route.params.entranceType : ''
        if (entranceType == 'SCCarEntranceTypeTodayReserve') {//今日预定
            let today = moment().format("YYYY-MM-DD")
            this.setState({
                saleStatus: '3',
                tradeDateBegin: today + ' 00:00:00'
            })

            let obj = {
                title: '今日预定',
                key: 'todayReserve',
                value: '1'
            }
            this.addFilter(obj)
        } else if (entranceType == 'SCCarEntranceTypeTodaySold') {//今日销售
            let today = moment().format("YYYY-MM-DD")
            this.setState({
                saleStatus: '4',
                tradeDateBegin: today + ' 00:00:00',
                searchChannel: 'app_sold_merchant_car',
                topTitle: '已售库存'
            })

            let obj = {
                title: '今日销售',
                key: 'todaySold',
                value: '1'
            }
            this.addFilter(obj)
        }

        this.setState({
            isRefresh: true
        }, () => {
            this.getCarList()
        }
        )
    }

    componentWillUnmount() {
        if (this.commonEvent) {
            this.commonEvent.remove();
        }
        if (this.selectBrandResult) {
            this.selectBrandResult.remove();
        }
    }



    render() {
        navigation = this.props.navigation;
        return (
            <View
                style={styles.container}>
                <StatusBarSelf color='#ffffff'></StatusBarSelf>

                {this.renderTop()}

                {this.renderFilter()}

                {this.state.filterShowList.length > 0 && this.renderFilterShow()}

                {this.renderShare()}


                {this.renderCarList()}

                <StockTopDropdown
                    onSelect={(result) => {
                        this.onSelctTopResult(result)

                    }}
                    visible={this.state.isShowTopDropdown}
                    onClose={() => {
                        this.setState({
                            isShowTopDropdown: false
                        })
                    }}>

                </StockTopDropdown>

                <StockStatusDropdown
                    onSelect={(result) => {
                        console.log(result);
                        this.setState({
                            isShowStockStatusDrop: false,
                            storeStatus: result.value,
                            stockStatusShowText: result.title == '全部状态' ? '库存状态' : result.title
                        }, function () {
                            this.refreshData()
                        })
                    }}
                    visible={this.state.isShowStockStatusDrop}
                    onClose={() => {
                        this.setState({
                            isShowStockStatusDrop: false
                        })
                    }}>

                </StockStatusDropdown>

                <CheckStatusDropdown
                    onSelect={(result) => {
                        console.log(result);
                        this.setState({
                            isShowCheckStatusDrop: false,
                            detectionStatus: result.value,
                            checkStatusShowText: result.title == '全部状态' ? '检测状态' : result.title
                        }, function () {
                            this.refreshData()
                        })
                    }}
                    visible={this.state.isShowCheckStatusDrop}
                    onClose={() => {
                        this.setState({
                            isShowCheckStatusDrop: false
                        })
                    }}>

                </CheckStatusDropdown>

                <SortDropdown
                    onSelect={(result) => {
                        console.log(result);
                        this.setState({
                            isShowSortDrop: false,
                            orderColumns: result.value,
                            sortShowText: result.title == '默认排序' ? '排序' : result.title
                        }, function () {
                            this.refreshData()
                        })
                    }}
                    visible={this.state.isShowSortDrop}
                    onClose={() => {
                        this.setState({
                            isShowSortDrop: false
                        })
                    }}>

                </SortDropdown>

                <PriceRangeModal
                    visible={this.state.isPriceModalVisible}
                    onClose={() => this.setIsPriceModalVisible(false)}
                    onConfirm={(min, max, priceTitle) => this.setPriceRange(min, max, priceTitle)}
                    markedPriceMin={this.state.markedPriceMin}
                    markedPriceMax={this.state.markedPriceMax}>
                </PriceRangeModal>

                <DateRangeModal
                    visible={this.state.isDateModalVisible}
                    onClose={this.toggleDateModal}
                    onConfirm={this.handleDateConfirm}
                    startDate={this.state.tradeDateBegin}
                    endDate={this.state.tradeDateEnd}
                >

                </DateRangeModal>

                {this.state.isShowSharePop ?
                    <CarListShareBox
                        closeHandler={() => {
                            this.setState({
                                isShowSharePop: false
                            })
                        }}
                        shareTypeHandler={(type) => {
                            this.setState({
                                isShowSharePop: false
                            })
                            if (type == 1) {
                                this.setState({
                                    isShowShareBottom: true
                                })
                            } else {
                                navigation.navigate('SelectShareCarListPage', { searchParams: this.state.shareParams })
                            }
                        }}
                    />
                    :
                    null
                }

                {this.state.isShowShareBottom ?
                    <BottomShareDialog
                        sharePlatForms={
                            [
                                SharePlatForm.SharePlatFormWeChatSession,
                                SharePlatForm.SharePlatFormWeChatTimeline
                            ]
                        }
                        visible={this.state.isShowShareBottom}
                        shareResult={(platform) => {
                            if (platform == SharePlatForm.SharePlatFormWeChatSession || platform == SharePlatForm.SharePlatFormWeChatTimeline) {
                                this.shareWebToWx(platform)
                            }
                        }}
                        onClose={() => {
                            this.setState({
                                isShowShareBottom: false
                            })
                        }}>

                    </BottomShareDialog>
                    :
                    null
                }


            </View>
        );
    }

    shareWebToWx(platform) {
        let title = Constant.userInfo.fullname + '为您推荐了' + this.state.carTotal + '辆好车-' + (Constant.userInfo.merchantAbbreviation ? Constant.userInfo.merchantAbbreviation : Constant.userInfo.merchantName)

        let description = '【联系电话】' + '\n' + Constant.userInfo.username

        // let params = {
        //     isOpen: 1,
        //     pageNo: 1,
        //     pageSize: 20,
        //     searchChannel: 'app_stock_merchant_car',
        //     merchantId: Constant.userInfo.merchantId,
        //     shareMerchantId: Constant.userInfo.merchantId,
        //     shareUserId: Constant.userInfo.userId,
        //     userId: Constant.userInfo.userId,
        // }

        let searchParams = JSON.parse(JSON.stringify(this.state.shareParams))
        searchParams['merchantId'] = Constant.userInfo.merchantId
        searchParams.pageNo = 1
        searchParams['shareMerchantId'] = Constant.userInfo.merchantId
        searchParams['shareUserId'] = Constant.userInfo.userId
        searchParams['userId'] = Constant.userInfo.userId


        let jsonString = JSON.stringify(searchParams)
        const base64Encoded = base64.encode(jsonString);
        let webpageUrl = Constant.webDomain + '/sharecarlist?params=' + base64Encoded

        let data = {
            title: title,
            description: description,
            type: 'news',
            webpageUrl: webpageUrl,
            thumbImage: getImgUrl(Constant.userInfo.face)
        }

        if (platform == 1) {
            shareWebToSession(data)
        } else {
            shareWebToTimeline(data)
        }
    }

    toggleDateModal = () => {
        this.setState(({
            isDateModalVisible: !this.state.isDateModalVisible
        }));
    };

    handleDateConfirm = (startDate, endDate) => {
        console.log('选择的日期范围:', startDate, endDate);

        let tradeDateBegin = ''
        if (startDate && startDate != '') {
            tradeDateBegin = startDate + '-01'
        }
        let tradeDateEnd = ''
        if (endDate && endDate != '') {
            let year = endDate.split('-')[0]
            let month = endDate.split('-')[1]
            if (month.startsWith('0')) {
                let temp = month.replace('0', '')
                month = temp
            }

            let monthAdd = parseInt(month)

            let days = new Date(parseInt(year), monthAdd, 0).getDate()
            tradeDateEnd = endDate + '-' + days
        }

        let priceText = ''
        if (startDate == '' && endDate == '') {
            priceText = '不限'
        } else if (startDate == '') {
            priceText = endDate + "之前"

        } else if (startDate != '' && endDate == '') {
            priceText = startDate + "之后"

        } else if (startDate != '') {
            priceText = startDate + "至" + endDate + ""

        }


        this.setState({
            tradeDateBegin: tradeDateBegin,
            tradeDateEnd: tradeDateEnd,
            tradeDateText: priceText
        });
        let dateObj = {
            title: priceText,
            key: 'date',
            value: 0
        }
        this.addFilter(dateObj)
        this.refreshData()
    };


    setIsPriceModalVisible(visible) {
        this.setState({
            isPriceModalVisible: visible
        })
    }

    setPriceRange(min, max, priceTitle) {
        this.setState({
            markedPriceMin: min,
            markedPriceMax: max
        })

        let priceObj = {
            title: priceTitle,
            key: 'price',
            value: 0
        }
        this.addFilter(priceObj)

        this.refreshData()
    }

    onSelctTopResult(result) {

        let searchChannel = 'app_stock_merchant_car'
        let saleStatus = ''
        let joinQuotationCenter = -1
        let joinUnion = -1
        let isShowShareCar = true
        if (result == '全部库存' || result == '已上架' || result == '未上架' || result == '已预订') {
            searchChannel = 'app_stock_merchant_car'

            //销售状态 1:预售,2:在售,3:已预订,4:已售,5:下架	6退库
            if (result == '全部库存') {
                saleStatus = '1,2,3'
                isShowShareCar = true
            }
            else if (result == '已上架') {
                if (this.state.isFranchisee) {
                    joinQuotationCenter = 1
                } else {
                    joinUnion = 1
                }

                saleStatus = ''
                isShowShareCar = true
            } else if (result == '未上架') {
                if (this.state.isFranchisee) {
                    joinQuotationCenter = 0
                } else {
                    joinUnion = 0
                }
                saleStatus = ''
                isShowShareCar = true
            } else if (result == '已预订') {
                saleStatus = '3'
                isShowShareCar = false
            }

        } else {
            searchChannel = 'app_sold_merchant_car'
            if (result == '已售库存') {
                saleStatus = '4'
                isShowShareCar = false
            }
            else if (result == '退库管理') {
                saleStatus = '6'
                isShowShareCar = false
            }
        }

        this.setState({
            isShowTopDropdown: false,
            topTitle: result,
            searchChannel: searchChannel,
            saleStatus: saleStatus,
            joinQuotationCenter: joinQuotationCenter,
            joinUnion: joinUnion,
            isShowShareCar: isShowShareCar

        }, function () {
            this.refreshData()
        })
    }

    renderTop() {
        return (
            <View style={styles.topContain}>
                <TouchableOpacity
                    style={styles.backBox}
                    onPress={() => {
                        navigation.goBack();
                    }}>
                    <Image style={styles.iconImg} source={require('source/image/comm/icon_home.png')}></Image>
                </TouchableOpacity>

                <TouchableOpacity
                    style={[styles.topTitleContain, { paddingHorizontal: 20 }]}
                    onPress={() => {
                        this.setState({
                            isShowTopDropdown: true
                        })
                    }}>
                    <Text style={styles.topTitleText}>{this.state.topTitle}</Text>
                    <Image style={styles.topTitleImg} source={require('source/image/comm/caret-down-small.png')}></Image>
                </TouchableOpacity>
                <View style={[styles.topTitleContain, { width: 80, justifyContent: 'flex-end' }]}>
                    <TouchableOpacity
                        style={{ width: 40, height: '100%', justifyContent: 'center' }}
                        onPress={() => { navigation.navigate('SearchPage', { fromPage: 'CarStockListPage' }) }}>
                        <Image style={styles.iconImg} source={require('source/image/comm/icon_search_black.png')}></Image>
                    </TouchableOpacity>

                    {
                        this.state.addCarPerm ?
                            <TouchableOpacity
                                style={{ width: 40, height: '100%', justifyContent: 'center' }}
                                onPress={() => {
                                    navigation.navigate('PublishCarPage', {
                                        completion: () => {
                                            navigation.goBack()
                                            this.refreshData()
                                        }
                                    })
                                }}>
                                <Image style={styles.iconImg} source={require('source/image/comm/icon_add_car.png')}></Image>
                            </TouchableOpacity>
                            :
                            null
                    }

                </View>
            </View>
        )
    }

    renderFilter() {
        return (
            <View style={styles.filterContain}>
                <TouchableOpacity
                    style={styles.filterItem}
                    onPress={() => {
                        let params = { selectLevel: 2, from: 'CarStockListPage' }
                        AndroidModule.selectBrand(params, (error, result) => {
                            console.log('result = ', result)
                            this.formatBrand(result)
                        })
                    }}>
                    <Text style={styles.filterText}>品牌</Text>
                    <Image style={styles.filterImg} source={require('source/image/comm/down_small_gray.png')}></Image>
                </TouchableOpacity>
                {this.state.topTitle != '已预订' && this.state.topTitle != '已售库存' && this.state.topTitle != '退库管理' ?
                    <TouchableOpacity
                        style={[styles.filterItem, { flex: 1.3 }]}
                        onPress={() => {
                            this.setState({
                                isShowStockStatusDrop: true
                            })
                        }}>
                        <Text style={this.state.storeStatus ? styles.filterSelText : styles.filterText}>{this.state.stockStatusShowText}</Text>
                        <Image style={styles.filterImg} source={this.state.storeStatus ? require('source/image/comm/up_small_yeoolow.png') : require('source/image/comm/down_small_gray.png')}></Image>
                    </TouchableOpacity>
                    : null
                }


                {this.state.topTitle != '已预订' && this.state.topTitle != '已售库存' && this.state.topTitle != '退库管理' ?
                    <TouchableOpacity
                        style={styles.filterItem}
                        onPress={() => {
                            this.setState({
                                isShowCheckStatusDrop: true
                            })
                        }}>
                        <Text style={this.state.detectionStatus ? styles.filterSelText : styles.filterText}>{this.state.checkStatusShowText}</Text>
                        <Image style={styles.filterImg} source={this.state.detectionStatus ? require('source/image/comm/up_small_yeoolow.png') : require('source/image/comm/down_small_gray.png')}></Image>
                    </TouchableOpacity> : null
                }

                {this.state.topTitle == '退库管理' ?
                    <TouchableOpacity
                        style={styles.filterItem}
                        onPress={() => {
                            this.setState({
                                isPriceModalVisible: true
                            })
                        }}>
                        <Text style={styles.filterText}>{'价格'}</Text>
                        <Image style={styles.filterImg} source={require('source/image/comm/down_small_gray.png')}></Image>
                    </TouchableOpacity> : null
                }

                {this.state.topTitle == '已预订' || this.state.topTitle == '已售库存' ?
                    <TouchableOpacity
                        style={styles.filterItem}
                        onPress={() => {
                            navigation.navigate('SellerSelectPage', {
                                selectedUserId: this.state.sellerUserId,
                                title: '销售员名称',
                                selectCompletion: (data) => {
                                    navigation.goBack()
                                    let userObj = {
                                        title: data.fullname,
                                        key: 'sellerUserId',
                                        value: data.userId
                                    }

                                    this.addFilter(userObj)

                                    this.setState({
                                        sellerUserId: data.userId
                                    }, function () {
                                        this.refreshData()
                                    })
                                }
                            })

                            // AndroidModule.selectSelfUser({ title: '销售员', from: 'sell' }, (error, result) => {

                            // })
                        }}>
                        <Text style={styles.filterText}>{'销售员'}</Text>
                        <Image style={styles.filterImg} source={require('source/image/comm/down_small_gray.png')}></Image>
                    </TouchableOpacity> : null
                }

                {this.state.topTitle == '已售库存' ?
                    <TouchableOpacity
                        style={styles.filterItem}
                        onPress={() => {
                            this.setState({
                                isDateModalVisible: true
                            })
                        }}>
                        <Text style={styles.filterText}>{'成交日期'}</Text>
                        <Image style={styles.filterImg} source={require('source/image/comm/down_small_gray.png')}></Image>
                    </TouchableOpacity> : null
                }

                {this.state.topTitle != '已售库存' ?
                    <TouchableOpacity
                        style={styles.filterItem}
                        onPress={() => {
                            this.setState({
                                isShowSortDrop: true
                            })
                        }}>
                        <Text style={this.state.orderColumns.length > 0 ? styles.filterSelText : styles.filterText} numberOfLines={1}>{this.state.sortShowText}</Text>
                        <Image style={styles.filterImg} source={this.state.orderColumns.length > 0 ? require('source/image/comm/up_small_yeoolow.png') : require('source/image/comm/down_small_gray.png')}></Image>
                    </TouchableOpacity>
                    : null
                }

                {this.state.topTitle != '已售库存' ?
                    <TouchableOpacity
                        style={styles.filterItem}
                        onPress={() => {
                            navigation.navigate('MoreFilterPage', {
                                fromPage: 'CarStockListPage',
                                isReported: this.state.isReported,
                                mileageMin: this.state.mileageMin,
                                mileageMax: this.state.mileageMax,
                                registerDateBegin: this.state.registerDateBegin,
                                registerDateEnd: this.state.registerDateEnd,

                                carColorList: this.state.carColorList,
                                carRankList: this.state.carRankList,
                                gearboxTypeList: this.state.gearboxTypeList,
                                emissionStdList: this.state.emissionStdList,
                                energyTypeList: this.state.energyTypeList,
                            })
                        }}>
                        <Text style={styles.filterText}>更多</Text>
                        <Image style={styles.filterImg} source={require('source/image/comm/down_small_gray.png')}></Image>
                    </TouchableOpacity>
                    : null
                }



            </View>
        )
    }

    renderFilterShow() {
        return (
            <View style={styles.filterShowContain}>
                {this.state.filterShowList.map((item, index) => {
                    if (item.key == 'clear') {
                        return (
                            <TouchableOpacity
                                key={index}
                                style={styles.filterShowItem}
                                onPress={() => {
                                    this.clearFilterShow()

                                }}>
                                <Image style={styles.filterShowClearImg} source={require('source/image/comm/btn_clear_history.png')}></Image>
                                <Text style={styles.filterShowText}>清空</Text>

                            </TouchableOpacity>
                        )
                    } else {
                        return (
                            <TouchableOpacity
                                key={index}
                                style={styles.filterShowItem}
                                onPress={() => {
                                    this.removeFilterShow(item, index)

                                }}>
                                <Text style={styles.filterShowText}>{item.title}</Text>
                                <Image style={styles.filterShowCloseImg} source={require('source/image/comm/icon_close.png')}></Image>
                            </TouchableOpacity>
                        )
                    }

                })
                }
            </View>
        )
    }

    removeFilterShow(item, index) {
        let filterShowList = this.state.filterShowList
        let temp = []
        for (let i = 0; i < filterShowList.length; i++) {
            if (i != index) {
                temp.push(filterShowList[i])
            }
        }

        if (item.key == 'keyword') {
            this.setState({
                keyword: ''
            })
        }

        else if (item.key == 'isReported') {
            this.setState({
                isReported: 0
            })
        }
        else if (item.key == 'mileage') {
            this.setState({
                mileageMin: 0,
                mileageMax: 10
            })
        }
        else if (item.key == 'carAge') {
            this.setState({
                registerDateBegin: 0,
                registerDateEnd: 8
            })
        }

        else if(item.key == 'carColorList'){
            this.state.carColorList.map((color, index)=>{
                if(item.value == color){
                    this.state.carColorList.splice(index,1)
                }
            })
        }else if(item.key == 'carRankList'){
            this.state.carRankList.map((Rank, index)=>{
                if(item.value == Rank){
                    this.state.carRankList.splice(index,1)
                }
            })
        }else if(item.key == 'gearboxTypeList'){
            this.state.gearboxTypeList.map((gearbox, index)=>{
                if(item.value == gearbox){
                    this.state.gearboxTypeList.splice(index,1)
                }
            })
        }else if(item.key == 'emissionStdList'){
            this.state.emissionStdList.map((emission, index)=>{
                if(item.value == emission){
                    this.state.emissionStdList.splice(index,1)
                }
            })
        }else if(item.key == 'energyTypeList'){
            this.state.energyTypeList.map((energy, index)=>{
                if(item.value == energy){
                    this.state.energyTypeList.splice(index,1)
                }
            })
        }

        else if (item.key == 'brand') {
            this.setState({
                brand: 0
            })
        } else if (item.key == 'series') {
            this.setState({
                series: 0
            })
        } else if (item.key == 'price') {
            this.setState({
                markedPriceMin: 0,
                markedPriceMax: 0
            })
        } else if (item.key == 'date') {
            this.setState({
                tradeDateBegin: '',
                tradeDateEnd: '',
                tradeDateText: ''
            })
        } else if (item.key == 'sellerUserId') {
            this.setState({
                sellerUserId: ''
            })
        } else if (item.key == 'todayReserve') {
            this.setState({
                tradeDateBegin: '',
                saleStatus: '1,2,3,5',
            })
        } else if (item.key == 'todaySold') {
            this.setState({
                tradeDateBegin: '',
                saleStatus: '1,2,3,5',
                searchChannel: 'app_stock_merchant_car'
            })
        }

        if (temp.length == 1) {
            temp = []
        }

        this.setState({
            filterShowList: temp
        }, function () {
            this.refreshData()
        })
    }

    clearFilterShow() {
        if (entranceType == 'SCCarEntranceTypeTodayReserve') {//今日预定
            this.setState({
                saleStatus: '1,2,3,5',
                tradeDateBegin: ''
            })
        } else if (entranceType == 'SCCarEntranceTypeTodaySold') {//今日销售
            this.setState({
                saleStatus: '1,2,3,5',
                tradeDateBegin: '',
                searchChannel: 'app_stock_merchant_car'
            })
        }
        this.setState({
            keyword: '',
            filterShowList: [],
            isReported: 0,
            mileageMin: 0,
            mileageMax: 10,
            registerDateBegin: 0,
            registerDateEnd: 8,

            brand: 0,
            series: 0,

            // 多选
            carColorList: [],
            carRankList: [],
            gearboxTypeList: [],
            emissionStdList: [],
            energyTypeList: [],

        }, function () {
            this.refreshData()
        })
    }

    renderShare() {
        return (
            <View style={styles.shareContain}>
                <Text style={styles.totalText}>共找到{this.state.carTotal}辆</Text>

                {this.state.isShowShareCar ?
                    <TouchableOpacity
                        style={styles.shareBtn}
                        onPress={() => {
                            this.setState({
                                isShowSharePop: true
                            })
                        }}>
                        <Text style={styles.shareText}>分享</Text>
                    </TouchableOpacity>
                    : null
                }

            </View>
        )
    }

    renderCarList() {
        return (
            <FlatList
                data={this.state.carList}
                renderItem={this.renderCarItem.bind(this)}
                keyExtractor={item => item.carId + ''}
                style={styles.list}
                extraData={this.state}
                ListFooterComponent={this._renderFooter.bind(this)}
                onEndReached={this._onEndReached.bind(this)}
                onEndReachedThreshold={0.2}
                onRefresh={this.refreshData}
                ListEmptyComponent={this.renderEmpty.bind(this)}
                refreshing={this.state.isRefresh}
            />
        )
    }

    renderEmpty() {
        if (!this.state.isRefresh) {
            return (
                <NoData Desc="暂无数据" style={{ marginTop: gREM(200) }} />
            )
        } else {
            return (
                null
            )
        }
    }

    _onEndReached() {
        console.log('_onEndReached', this.state.showFoot)
        if (this.state.showFoot != 0) {
            return null;
        }

        let nextPage = this.state.pageNo + 1

        this.setState({ showFoot: 2, pageNo: nextPage },
            function () {
                this.getCarList();
            });


    }

    _renderFooter() {
        if (this.state.carList.length == 0) {
            return null
        }
        if (this.state.showFoot === 1) {
            return <View style={{ height: Constant.bottomHeight }} />;
        } else if (this.state.showFoot === 2) {
            return (
                <View style={styles.footer}>
                    <ActivityIndicator size="small" color="#999" />
                    <Text style={styles.loadMoreTextStyle}>正在加载更多数据...</Text>
                </View>
            );
        } else if (this.state.showFoot === 0) {
            return null;
        }
    }

    refreshData = () => {

        this.setState({ carList: [], isRefresh: true, pageNo: 1 }, function () {
            this.getCarList();
        })

    }

    renderCarItem({ item, index }) {
        return (
            <TouchableOpacity
                key={index}
                style={styles.cardContainer}
                activeOpacity={0.8}
                onPress={() => {
                    navigation.navigate('CarDetailPage', {
                        carId: item.carId,
                        saleStatus: item.saleStatus,
                        merchantId: item.merchantId,
                        carDetailCallBack: () => {
                            this.refreshData()
                        }
                    })
                }}
            >
                <View style={styles.carContainer}>

                    <AsyncImage
                        source={{ uri: getImgUrl(item.mainPic) }}
                        defaultSource={require('source/image/icon_car_default.png')}
                        style={styles.carImage}
                        resizeMode="cover"
                    />

                    <View style={styles.infoContainer}>
                        <View>
                            <Text style={styles.carName} numberOfLines={2} ellipsizeMode='tail'>{item.seriesName + ' ' + item.speciesName}</Text>

                            <Text style={styles.subInfo}>
                                {this.getSubCarInfo(item)}
                            </Text>
                        </View>


                        <Text style={styles.price}>{this.getCarPrice(item)}</Text>

                    </View>
                </View>

                {
                    item.saleStatus != CarSaleStatus.CarSaleStatusCancelStock ?
                        <View style={styles.statusContainer}>

                            {

                            }

                            {/* 库存状态 */}
                            {
                                item.storeStatus && item.saleStatus != CarSaleStatus.CarSaleStatusSaled ?
                                    <View style={styles.statusTag}>
                                        <Text style={styles.tagText}>{getStoreStatus(item.storeStatus)}</Text>
                                    </View>
                                    :
                                    null
                            }

                            {/* 库龄 */}
                            {
                                item.purchaseDate && item.saleStatus != CarSaleStatus.CarSaleStatusSaled ?
                                    <View style={styles.statusTag}>
                                        <Text style={styles.tagText}>库龄{this.getStockAge(item.purchaseDate)}天</Text>
                                    </View>
                                    :
                                    null
                            }
                            {/* 收购性质，在全款(purchaseType=1)的时候隐藏 */}
                            {
                                item.purchaseType && item.purchaseType != 1 ?
                                    <View style={styles.statusTag}>
                                        <Text style={styles.tagText}>{getPurchaseType(item.purchaseType)}</Text>
                                    </View>
                                    :
                                    null
                            }
                            {/* 已上架/未上架   已上架、未上架列表，不要显示上架标签*/}
                            {this.state.topTitle != '已上架' && this.state.topTitle != '未上架' && item.saleStatus != CarSaleStatus.CarSaleStatusSaled
                                ?
                                this.state.isFranchisee == 1 ?
                                    <View style={[styles.statusTag, { backgroundColor: item.joinQuotationCenter == 1 ? '#FFF7E0' : '#F4F4F4' }]}>
                                        <Text style={[styles.tagText, { color: item.joinQuotationCenter == 1 ? '#FF7B00' : '#666' }]}>{item.joinQuotationCenter == 1 ? '已上架' : '未上架'}</Text>
                                    </View>
                                    :
                                    <View style={[styles.statusTag, { backgroundColor: item.joinUnion == 1 ? '#FFF7E0' : '#F4F4F4' }]}>
                                        <Text style={[styles.tagText, { color: item.joinUnion == 1 ? '#FF7B00' : '#666' }]}>{item.joinUnion == 1 ? '已上架' : '未上架'}</Text>
                                    </View>
                                : null
                            }


                            {/* 已预订 */}
                            {
                                item.saleStatus == CarSaleStatus.CarSaleStatusReserved ?
                                    <View style={[styles.statusTag, { backgroundColor: '#FFF7E0' }]}>
                                        <Text style={[styles.tagText, { color: '#FF7B00' }]}>已预订</Text>
                                    </View>
                                    :
                                    null
                            }
                            {/* 检测状态 */}
                            {
                                item.saleStatus == CarSaleStatus.CarSaleStatuseOnSale || item.saleStatus == CarSaleStatus.CarSaleStatusReserved ?
                                    (
                                        item.detectionStatus ?
                                            <View style={[styles.statusTag, { backgroundColor: item.detectionStatus == 3 ? '#FFF7E0' : '#F4F4F4' }]}>
                                                <Text style={[styles.tagText, { color: item.detectionStatus == 3 ? '#FF7B00' : '#666' }]}>{getCheckStatus(item.detectionStatus)}</Text>
                                            </View>
                                            :
                                            <View style={styles.statusTag}>
                                                <Text style={styles.tagText}>{'未自检'}</Text>
                                            </View>
                                    )
                                    :
                                    null
                            }

                        </View>
                        :
                        null
                }



            </TouchableOpacity>
        )

    }

    getStockAge(createTime) {
        const createDate = new Date(createTime);
        if (isNaN(createDate.getTime())) {
            throw new Error("Invalid date format: " + createTime);
        }
        const currentTime = Date.now();
        const diffMs = currentTime - createDate.getTime();
        const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
        return diffDays + 1;
    }

    getSubCarInfo(item) {

        if (item.carType == 1) {//新车

            return '新车指导价：' + getPriceFormat(item.guidePrice)
        } else {
            return getCarRegisterDate(item.registerDate) + ' ' + getMileFormat(item.mileage)
        }
    }

    getCarPrice(item) {
        //联盟商家车源显示“一口价”，加盟商车源显示“展厅标价” 
        //isFranchisee：是否加盟商 0否1是 

        return this.state.isFranchisee == 1 ? '挂牌价：' + getPriceFormat(item.listPrice) : '一口价：' + getPriceFormat(item.markedPrice)
    }

    formatBrand(result) {
        if (result.brandId == 0 || !result || Object.keys(result).length == 0) {
            this.removeBrand()
        } else {
            let brandObj = {
                title: result.brandName,
                key: 'brand',
                value: result.brandId
            }
            this.addFilter(brandObj)

            if (result.seriesId == 0 || !result.seriesId) {
                this.removeSeriesBrand()
            } else {
                let seriesObj = {
                    title: result.seriesName,
                    key: 'series',
                    value: result.seriesId
                }
                this.addFilter(seriesObj)
            }

        }
        this.setState({
            brand: result.brandId,
            series: result.seriesId,
        }, function () {
            this.refreshData()
        })

    }

    removeBrand() {
        let temp = []
        for (let i = 0; i < this.state.filterShowList.length; i++) {
            if (this.state.filterShowList[i].key != 'brand' && this.state.filterShowList[i].key != 'series') {
                temp.push(this.state.filterShowList[i])

            }
        }

        if (temp.length == 1) {
            temp = []
        }

        this.setState({
            filterShowList: temp
        })
    }

    removeSeriesBrand() {
        let temp = []
        for (let i = 0; i < this.state.filterShowList.length; i++) {
            if (this.state.filterShowList[i].key != 'series') {
                temp.push(this.state.filterShowList[i])

            }
        }

        if (temp.length == 1) {
            temp = []
        }

        this.setState({
            filterShowList: temp
        })
    }


    getCarList() {

        let params = {
            searchChannel: this.state.searchChannel,
            pageNo: this.state.pageNo,
            pageSize: 20,
            merchantId: Constant.userInfo.merchantId
        }

        if (this.state.saleStatus != '') {
            params['saleStatus'] = this.state.saleStatus
        }

        if (this.state.joinQuotationCenter != -1) {
            params['joinQuotationCenter'] = this.state.joinQuotationCenter

        }

        if (this.state.joinUnion != -1) {
            params['joinUnion'] = this.state.joinUnion
        }

        if (this.state.storeStatus != 0) {
            params['storeStatus'] = this.state.storeStatus
        }
        if (this.state.detectionStatus != 0) {
            params['detectionStatus'] = this.state.detectionStatus
        }

        if (this.state.orderColumns.length > 0) {
            params['orderColumns'] = this.state.orderColumns
        }

        if (this.state.keyword != '') {
            params['carName'] = this.state.keyword
        }

        if (this.state.isReported != 0) {
            params['isReported'] = this.state.isReported
        }

        if (this.state.mileageMin != 0) {
            params['mileageMin'] = this.state.mileageMin * 10000
        }
        if (this.state.mileageMax != 10) {
            params['mileageMax'] = this.state.mileageMax * 10000
        }

        if (this.state.carColor != '') {
            params['carColor'] = this.state.carColor
        }

        // 外观颜色
        if(this.state.carColorList && this.state.carColorList.length > 0){
            params['carColorList'] = this.state.carColorList
        }
        // 车型级别
        if(this.state.carRankList && this.state.carRankList.length > 0){
            params['carRankList'] = this.state.carRankList
        }
        // 变速箱
        if(this.state.gearboxTypeList && this.state.gearboxTypeList.length > 0){
            params['gearboxTypeList'] = this.state.gearboxTypeList
        }
        // 排放标准
        if(this.state.emissionStdList && this.state.emissionStdList.length > 0){
            params['emissionStdList'] = this.state.emissionStdList
        }
        // 能源类型
        if(this.state.energyTypeList && this.state.energyTypeList.length > 0){
            params['energyTypeList'] = this.state.energyTypeList
        }

        let nowDate = new Date()
        let nowYear = nowDate.getFullYear()
        let nowMonth = nowDate.getMonth() + 1
        let nowDay = nowDate.getDate()
        if (this.state.registerDateBegin != 0) {
            let beginDate = (nowYear - this.state.registerDateBegin) + '-' + nowMonth + '-' + nowDay
            params['registerDateEnd'] = beginDate
        }
        if (this.state.registerDateEnd != 8) {
            let endDate = (nowYear - this.state.registerDateEnd) + '-' + nowMonth + '-' + nowDay
            params['registerDateBegin'] = endDate
        }

        if (this.state.carRank != '') {
            params['carRank'] = this.state.carRank
        }

        if (this.state.gearboxType != 0) {
            params['gearboxType'] = this.state.gearboxType
        }

        if (this.state.emissionStd != 0) {
            params['emissionStd'] = this.state.emissionStd
        }
        if (this.state.energyType != 0) {
            params['energyTypeList'] = [this.state.energyType]
        }

        if (this.state.brand != 0) {
            params['brand'] = this.state.brand
        }

        if (this.state.series != 0) {
            params['series'] = this.state.series
        }

        if (this.state.markedPriceMin != 0) {
            params['markedPriceMin'] = this.state.markedPriceMin * 10000
        }

        if (this.state.markedPriceMax != 0) {
            params['markedPriceMax'] = this.state.markedPriceMax * 10000
        }

        if (this.state.tradeDateBegin != '') {
            params['tradeDateBegin'] = this.state.tradeDateBegin
        }

        if (this.state.tradeDateEnd != '') {
            params['tradeDateEnd'] = this.state.tradeDateEnd
        }

        if (this.state.sellerUserId != '') {
            params['sellerUserId'] = this.state.sellerUserId
        }

        this.setState({
            shareParams: params
        })

        HttpUtils.postRequest(HttpUrls.searchCars, params)
            .then((result) => {
                this.setState({
                    isRefresh: false
                })
                let code = result.code
                if (code == 0) {

                    let resultList = result.data.resultList
                    // console.log('resultList=',resultList)
                    if (resultList && resultList.length > 0) {


                        if (resultList.length < 20) {

                            this.setState({
                                showFoot: 1
                            })
                        } else {
                            this.setState({
                                showFoot: 0
                            })
                        }

                        this.setState({
                            carList: this.state.carList.concat(resultList),
                        })

                    } else {

                        this.setState({
                            showFoot: 1
                        })
                    }

                    this.setState({
                        isRefresh: false,
                        carTotal: result.data.totalSize
                    })
                }
            })
            .catch((error) => {

            });
    }

    addFilter(filterModel) {
        let filterShowList = this.state.filterShowList
        let clear = {
            key: 'clear',
        }
        if (filterShowList.length == 0) {
            filterShowList.push(filterModel)
            filterShowList.push(clear)

        } else {
            let isExist = false
            for (let i = 0; i < filterShowList.length; i++) {
                if (filterShowList[i].key == filterModel.key) {
                    isExist = true
                    filterShowList[i] = filterModel
                }
            }

            if (isExist) {

            } else {
                filterShowList.splice(filterShowList.length - 2, 0, filterModel);
                // filterShowList.push(filterModel)
            }
        }
        console.log('filterShowList', filterShowList)
        this.setState({
            filterShowList: filterShowList
        })
    }

    addAllFilterShow(data) {
        let tempList = []
        let resultList = []
        let isReported = data.isReported

        if (isReported == 1) {
            tempList.push({
                title: '有维保',
                key: 'isReported',
                value: 1
            })
        }

        let mileShowText = data.mileShowText
        let mileageMin = data.mileageMin
        let mileageMax = data.mileageMax

        if (mileShowText === '不限') {

        } else {
            tempList.push({
                title: mileShowText,
                key: 'mileage',
                value: 0
            })
        }

        // 颜色
        if(data.carColorList && data.carColorList.length > 0){
            data.carColorList.map((item, index) => {
                let tempListItem = {
                    title: item,
                    key: 'carColorList',
                    value: item
                }
                tempList.push(tempListItem)
            })
        }
        // 车型级别
        if(data.carRankList && data.carRankList.length > 0){
            data.carRankList.map((item, index) => {
                data.carRankListPr.map( rankItem => {
                    if(rankItem.id == item){
                        let tempListItem = {
                            title: rankItem.title,
                            key: 'carRankList',
                            value: item
                        }
                        tempList.push(tempListItem)
                    }
                })
            })
        }
        // 变速箱
        if(data.gearboxTypeList && data.gearboxTypeList.length > 0){
            data.gearboxTypeList.map((item, index) => {
                data.gearboxTypeListPr.map(gItem => {
                    if(gItem.id == item){
                        let tempListItem = {
                            title: gItem.title,
                            key: 'gearboxTypeList',
                            value: item
                        }
                        tempList.push(tempListItem)
                    }
                })
            })
        }
        // 排放标准
        if(data.emissionStdList && data.emissionStdList.length > 0){
            data.emissionStdList.map((item, index) => {
                data.emissionStdListPr.map(gItem => {
                    if(gItem.id == item){
                        let tempListItem = {
                            title: gItem.title,
                            key: 'emissionStdList',
                            value: item
                        }
                        tempList.push(tempListItem)
                    }
                })
            })
        }
        // 燃油类型
        if(data.energyTypeList && data.energyTypeList.length > 0){
            data.energyTypeList.map((item, index) => {
                data.energyTypeListPr.map(rItem => {
                    if(rItem.id == item){
                        let tempListItem = {
                            title: rItem.title,
                            key: 'energyTypeList',
                            value: item
                        }
                        tempList.push(tempListItem)
                    }
                })
            })
        }

        let ageShowText = data.ageShowText
        let registerDateBegin = data.registerDateBegin
        let registerDateEnd = data.registerDateEnd

        if (ageShowText === '不限') {

        } else {
            tempList.push({
                title: ageShowText,
                key: 'carAge',
                value: 0
            })
        }


        let filterShowList = this.state.filterShowList
        if (filterShowList.length == 0) {
            resultList = tempList
        } else {
            let temp = [];
            for (let i = 0; i < filterShowList.length; i++) {
                if (filterShowList[i].key == 'keyword' || filterShowList[i].key == 'brand') {
                    temp.push(filterShowList[i])

                }
            }
            resultList = temp.concat(tempList)

        }

        resultList.push({ key: 'clear' })

        this.setState({
            isReported: isReported,
            filterShowList: resultList,
            mileageMin: mileageMin,
            mileageMax: mileageMax,
            registerDateBegin: registerDateBegin,
            registerDateEnd: registerDateEnd,

            carColorList: data.carColorList,
            carColorListPr: data.carRankListPr,
            carRankList: data.carRankList,
            carRankListPr: data.carRankListPr,
            gearboxTypeList: data.gearboxTypeList,
            gearboxTypeListPr: data.gearboxTypeListPr,
            emissionStdList: data.emissionStdList,
            emissionStdListPr: data.emissionStdListPr,
            energyTypeList: data.energyTypeList,
            energyTypeListPr: data.energyTypeListPr,
        })
    }


};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f9f9f9',

    },

    topContain: {
        width: '100%',
        height: 46,
        backgroundColor: '#ffffff',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingHorizontal: 5
    },

    backBox: {
        width: 80,
        paddingLeft: 10,
        height: '100%',
        flexDirection: 'row',
        justifyContent: 'flex-stat',
        alignItems: 'center',
    },
    iconImg: {
        width: 24,
        height: 24
    },
    topTitleContain: {
        height: '100%',
        flexDirection: 'row',
        alignItems: 'center'
    },
    topTitleText: {
        fontSize: 18,
        color: '#333333',
        fontWeight: '500'
    },
    topTitleImg: {
        width: 20,
        height: 20
    },

    list: {
        flex: 1,
    },
    cardContainer: {
        backgroundColor: '#fff',
        marginTop: 10,
        paddingLeft: 15,
        paddingRight: 15,
        paddingTop: 10,
        paddingBottom: 10,
        flexDirection: 'column',
    },
    carContainer: {
        flexDirection: 'row',
        alignItems: 'center'
    },
    carImage: {
        width: 130,
        height: 90,
        borderRadius: 4,
        backgroundColor: '#f5f5f5',
    },
    infoContainer: {
        flex: 1,
        marginLeft: 10,
        height: 90,
        flexDirection: 'column',
        justifyContent: 'space-between'
    },
    carName: {
        fontSize: 14,
        fontWeight: '500',
        marginBottom: 5,
        color: '#333',
    },
    subInfo: {
        fontSize: 12,
        color: '#999999',
        marginTop: 3,
    },
    price: {
        fontSize: 14,
        color: '#ED542E',

    },
    statusContainer: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        marginTop: 6
    },
    statusTag: {
        paddingHorizontal: 8,
        paddingVertical: 4,
        marginRight: 8,
        borderRadius: 2,
        backgroundColor: '#F4F4F4',
        justifyContent: 'center',
        alignItems: 'center'
    },
    statusText: {
        fontSize: 10,
    },

    tagText: {
        fontSize: 12,
        color: '#666'
    },

    filterContain: {
        width: '100%',
        height: 46,
        backgroundColor: '#fff',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingHorizontal: 5
    },

    filterItem: {
        height: '100%',
        flexDirection: 'row',
        alignItems: 'center',
        flex: 1,
        justifyContent: 'center',

    },
    filterImg: {
        width: 20,
        height: 20,
    },
    filterText: {
        fontSize: 14,
        color: '#666666'
    },
    filterSelText: {
        fontSize: 14,
        color: '#F99802'
    },
    shareContain: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        backgroundColor: '#fff',
        height: 32,
        paddingHorizontal: 15
    },
    totalText: {
        fontSize: 14,
        color: '#666666'
    },
    shareBtn: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#F99802',
        height: 23,
        paddingHorizontal: 15,
        borderRadius: 4
    },
    shareText: {
        fontSize: 12,
        color: '#fff'
    },
    footer: {
        flexDirection: 'row',
        height: 40,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#f6f6f6'
    },
    loadMoreTextStyle: {
        fontSize: 14,
        color: '#999999',
        marginStart: 10,
    },

    filterShowContain: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        backgroundColor: '#fff',
        paddingHorizontal: 15
    },
    filterShowItem: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        height: 30,
        backgroundColor: '#f6f6f6',
        borderRadius: 4,
        paddingHorizontal: 10,
        marginRight: 10,
        marginBottom: 5
    },
    filterShowText: {
        fontSize: 12,
        color: '#696969'
    },
    filterShowCloseImg: {
        width: 12,
        height: 12,
        marginLeft: 2
    },
    filterShowClearImg: {
        width: 15,
        height: 15,
        marginRight: 2,
        resizeMode: 'contain'
    },

    listShareIcon: {
        width: 50,
        height: 50
    },
    listShareBg: {
        position: 'absolute',
        top: 0, bottom: 0, left: 0, right: 0,
        backgroundColor: 'rgba(255,255,255,0.9)',
        justifyContent: 'center',
        alignItems: 'center'
    },
    listShareContain: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    listShareTitle: {
        fontSize: 16,
        color: '#333333'
    },
    listShareContent: {
        fontSize: 14,
        color: '#666666',
        marginTop: 8
    }


});